@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
/*.page{ background:url() repeat-y; background-size:100% 100%; background-repeat: no-repeat;}*/
.page{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
 
/*==================================*/
 
.page.inTop{
            -webkit-animation:ShowTop .5s ease-out both;
					animation:ShowTop .5s ease-out both;
}
.page.outTop{
            -webkit-animation:HideTop .5s ease-out both;
					animation:HideTop .5s ease-out both;
}
.page.inDown{
            -webkit-animation:ShowDown .5s ease-out both;
					animation:ShowDown .5s ease-out both;
}
.page.outDown{
            -webkit-animation:HideDown .5s ease-out both;
					animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
	0%{ -webkit-transform:translateY(100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
	0%{ transform:translateY(100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
	0%{ -webkit-transform:translateY(-100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
	0%{ transform:translateY(-100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(100%);}
}
 
/*==================================*/
 
.arrow{ width:60px; height:52px; color: #fff; font-size: 40px; position:absolute; left:50%; margin-left: -30px; bottom:0;
	-webkit-animation:fadeIn .5s 1s both ease-in-out;
			animation:fadeIn .5s 1s both ease-in-out;
}
.arrow div:first-child , .arrow div:last-child{ display: flex; justify-content: center; align-items: center; width:60px; height: 40px; position:absolute; left:0;
	-webkit-transform-origin:center top;
			transform-origin:center top;
}
.arrow div:first-child{ top:0;
	-webkit-animation:arrow .8s .5s ease-in-out both infinite alternate;
			animation:arrow .8s .5s ease-in-out both infinite alternate;
}
.arrow div:last-child{ top:12px;
	-webkit-animation:arrow .8s .8s ease-in-out both infinite alternate;
			animation:arrow .8s .8s ease-in-out both infinite alternate;
}
@-webkit-keyframes arrow{
	100%{ -webkit-transform:translateY(-50%); opacity:1;}
	0%{ -webkit-transform:translateY(0); opacity:0;}
}
@keyframes arrow{
	100%{ transform:translateY(-50%); opacity:1;}
	0%{ transform:translateY(0); opacity:0;}
}
 
 
/*==================================*/
 
/* .page > div > div:nth-child(1){
	-webkit-animation:fadeRightTan .8s .2s ease-in-out both;
			animation:fadeRightTan .8s .2s ease-in-out both;
}
.page > div > div:nth-child(2){
	-webkit-animation:fadeRightTan .8s .7s ease-in-out both;
			animation:fadeRightTan .8s .7s ease-in-out both;
}
.page > div > div:nth-child(3){
	-webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;
			animation:fadeRightTan .8s 1.2s ease-in-out both;
}
.page > div > div:nth-child(4){
	-webkit-animation:fadeRightTan .8s 1.7s ease-in-out both;
			animation:fadeRightTan .8s 1.7s ease-in-out both;
}
.page > div > div:nth-child(5){
	-webkit-animation:fadeRightTan .8s 2.2s ease-in-out both;
			animation:fadeRightTan .8s 2.2s ease-in-out both;
}
.page > div > div:nth-child(6){
	-webkit-animation:fadeRightTan .8s 2.7s ease-in-out both;
			animation:fadeRightTan .8s 2.7s ease-in-out both;
}
.page > div > div:nth-child(7){
	-webkit-animation:fadeRightTan .8s 3.2s ease-in-out both;
			animation:fadeRightTan .8s 3.2s ease-in-out both;
}
.page > div > div:nth-child(8){
	-webkit-animation:fadeRightTan .8s 4.7s ease-in-out both;
			animation:fadeRightTan .8s 4.7s ease-in-out both;
}
.page > div > div:nth-child(9){
	-webkit-animation:fadeRightTan .8s 5.2s ease-in-out both;
			animation:fadeRightTan .8s 5.2s ease-in-out both;
}
.page > div > div:nth-child(10){
	-webkit-animation:fadeRightTan .8s 5.7s ease-in-out both;
			animation:fadeRightTan .8s 5.7s ease-in-out both;
}
@-webkit-keyframes fadeRightTan{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	90%{ -webkit-transform:translateX(-2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightTan{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	90%{ transform:translateX(-2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
} */